.notification-center {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  
  .notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    
    .header-title {
      font-size: 34px;
      font-weight: bold;
      color: #333;
    }
    
    .close-button {
      font-size: 40px;
      color: #999;
      padding: 10px;
      
      &:active {
        color: #666;
      }
    }
  }
  
  .notification-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: #f9f9f9;
    
    .unread-count {
      font-size: 26px;
      color: #666;
    }
    
    .action-buttons {
      display: flex;
      
      .action-button {
        font-size: 26px;
        color: #007aff;
        padding: 0 16px;
        
        &:active {
          opacity: 0.7;
        }
        
        &:first-child {
          border-right: 1px solid #ddd;
        }
      }
    }
  }
  
  .loading-state, .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: #999;
    font-size: 28px;
  }
  
  .notification-list {
    flex: 1;
    overflow-y: auto;
    
    .notification-item {
      display: flex;
      padding: 16px 20px;
      border-bottom: 1px solid #f5f5f5;
      position: relative;
      
      &.unread {
        background-color: #f0f8ff;
        
        &:before {
          content: '';
          position: absolute;
          top: 20px;
          left: 8px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #ff6b00;
        }
      }
      
      .notification-icon {
        font-size: 36px;
        margin-right: 16px;
        width: 40px;
        text-align: center;
      }
      
      .notification-content {
        flex: 1;
        
        .notification-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0;
          margin-bottom: 8px;
          border-bottom: none;
          
          .notification-title {
            font-size: 28px;
            font-weight: bold;
            color: #333;
          }
          
          .notification-time {
            font-size: 24px;
            color: #999;
          }
        }
        
        .notification-text {
          font-size: 26px;
          color: #666;
          line-height: 1.5;
        }
      }
      
      .delete-button {
        font-size: 24px;
        color: #ff3b30;
        padding: 10px 0 10px 20px;
        
        &:active {
          opacity: 0.7;
        }
      }
    }
  }
} 